<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="../dist/img/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="../dist/img/favicon-16x16.png" sizes="16x16" type="image/png">
    <meta name="keywords" content="响应式后台模板,开源免费后台模板,Bootstrap5后台管理系统模板">
    <meta name="description" content="bootstrap-admin基于bootstrap5的免费开源的响应式后台管理模板">
    <meta name="author" content="ajiho">
    <link rel="stylesheet" href="../lib/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../dist/css/bootstrap-admin.min.css">
    <title>bootstrap-admin开源免费响应式后台管理系统模板</title>
</head>
<body class="bg-body-tertiary py-3">
<div class="container-fluid">
    <div class="card border-0 shadow-sm">
        <div class="card-header bg-body">
            sweetalert2插件演示
        </div>
        <div class="card-body">
            <div class="d-flex gap-2 flex-wrap">
                <button class="btn btn-success btn1">成功通知</button>
                <button class="btn btn-success btn2">警报通知</button>
                <button class="btn btn-success btn3">细小的错误toast通知</button>
                <button class="btn btn-success btn4">敏感操作时的对话框</button>
            </div>
        </div>
    </div>
</div>
<!--回到顶部开始-->
<a href="javaScript:" class="bsa-back-to-top"><i class='bi bi-arrow-up-short'></i></a>
<!--回到顶部结束-->


<script src="../lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/sweetalert2/dist/sweetalert2.all.min.js"></script>
<script src="../dist/js/bootstrap-admin.min.js"></script>
<script src="../dist/js/app.js"></script>
<!--假数据模拟,生产环境中请直接删除该js-->
<script src="../dist/js/bootstrap-admin.mock.js"></script>
<script>
    $(function () {
        $('.btn1').on('click', function () {
            Swal.fire(
                '登录成功!',
                '欢迎登录!',
                'success'
            ).then((result) => {
                if (result.isConfirmed) {
                    Swal.fire('您点击了确定')

                }
            })
        })

        $('.btn2').on('click', function () {
            Swal.fire({
                position: 'top-end',
                icon: 'warning',
                title: '系统内存不足!',
                showConfirmButton: false,
                timer: 1500
            })
        })

        $('.btn3').on('click', function () {
            const Toast = Swal.mixin({
                toast: true,
                position: 'top-end',
                showConfirmButton: false,
                timer: 30000,
                timerProgressBar: true,
                didOpen: (toast) => {
                    toast.addEventListener('mouseenter', Swal.stopTimer)
                    toast.addEventListener('mouseleave', Swal.resumeTimer)
                }
            })

            Toast.fire({
                icon: 'error',
                title: '该角色正在被占用,无法删除'
            })
        })

        $('.btn4').on('click', function () {

            Swal.fire({
                title: '确定删除该用户吗？',
                // text: "是否确定要批量添加选中文章？",
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#198754',
                cancelButtonColor: '#d93444',
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then((result) => {
                if (result.isConfirmed) {

                    Swal.fire({
                        icon: "success",
                        title: '删除成功',
                        timer: 1500000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.addEventListener('mouseenter', Swal.stopTimer)
                            toast.addEventListener('mouseleave', Swal.resumeTimer)
                        }
                    }).then((result) => {
                        //确定 取消 背景都会触发
                        if (result.isConfirmed || result.dismiss === Swal.DismissReason.timer || result.dismiss === Swal.DismissReason.backdrop) {

                            //刷新页面
                            //location.reload();
                        }
                    });
                }
            })

        })
    })
</script>
</body>
</html>